<template>
  <div class="login_container">
    <!-- <video class="video_bg" autoplay muted loop>
      <source src="../../img/星动中国40s.mp4" type="video/mp4" />
    </video> -->
    <div class="background">
      <img
        src="../../img/login.png"
        style="width: 100%; height: 100%"
        alt=""
      />
    </div>
    <!-- <div class="bg"></div> -->
    <div class="header">
      <!-- 可以放个校徽 -->
      <img src="#" alt="" />
      <!-- <h3 class="title">求索问卷--吾将上下而求索</h3> -->
    </div>
    <div id="try">
      <div class="rollbox" :class="{ box_rolling: isRolling }">
        <!-- 前面div -->
        <div class="rollbox_front">
          <div class="contentbox">
            <div class="login_box">
              <div class="login_top" style="font-size: 32px; letter-spacing: 4px">会员登录</div>
              <!-- 登录表单 -->
              <el-form
                :model="loginForm"
                :rules="loginRules"
                ref="loginForm"
                class="login_form"
              >
                <el-form-item label="账号" class="in" prop="username">
                  <el-input
                    v-model="loginForm.username"
                    prefix-icon="el-icon-user-solid"
                    placeholder="请输入用户名或邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" class="in" prop="password">
                  <el-input
                    v-model="loginForm.password"
                    prefix-icon="el-icon-lock"
                    placeholder="请输入密码"
                    show-password
                    type="password"
                    @keyup.enter.native="login"
                  ></el-input>
                </el-form-item>
                <el-form-item class="butoton">
                  <el-button
                    type="primary"
                    @click="login"
                    style="margin-top: 30px; float: left; margin-left: 5px"
                    >登 录</el-button
                  >
                  <el-button
                    type="primary"
                    @click="isRolling = !isRolling"
                    style="margin-top: 30px; float: right; margin-right: 5px"
                    >这就去注册</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 后面div -->
        <div class="rollbox_behind">
          <div class="contentbox">
            <div class="regest_box">
              <div class="regest_top" style="font-size: 32px; letter-spacing: 4px">会员注册</div>
              <el-form
                class="regest_form"
                :model="regestForm"
                :rules="regestRules"
                ref="regestForm"
              >
                <el-form-item label="注册用户名" prop="username">
                  <el-input
                    v-model="regestForm.username"
                    prefix-icon="el-icon-user-solid"
                    placeholder="请输入一个用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input
                    v-model="regestForm.email"
                    prefix-icon="el-icon-message"
                    placeholder="请输入一个有效邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="regestForm.password"
                    prefix-icon="el-icon-lock"
                    show-password
                    placeholder="请输入密码"
                    type="password"
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                  <el-input
                    v-model="regestForm.password2"
                    prefix-icon="el-icon-lock"
                    show-password
                    placeholder="请再次确认密码"
                    type="password"
                    @keyup.enter.native="regest"
                  ></el-input>
                </el-form-item>
                <el-form-item style="padding-top: 20px">
                  <el-button type="primary" @click="isRolling = !isRolling" style="float: left; margin-left: 12px"
                    >返回登录页</el-button
                  >
                  <el-button type="primary" @click="regest" style="float: right; margin-right: 12px">注 册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hex_md5 } from "../assets/md5.js";
export default {
  name: "try",
  data() {
    const validatePassword = (rule, value, callback) => {
      if (this.regestForm.password2 !== this.regestForm.password)
        callback("两次密码不一致");
      else callback();
    };
    return {
      //表单绑定对象
      beforeUrl: "",
      loginForm: {
        username: "",
        password: "",
      },
      //表单规则验证
      loginRules: {
        //用户名规则
        username: [
          { required: true, message: "请输入用户名或邮箱", trigger: "blur" },
          // { max: 8, min: 8, message: "请输入8位用户名", trigger: "blur" },
        ],
        //密码验证
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      isRolling: false,
      regestForm: {
        username: "",
        password: "",
        email: "",
        password2: "",
      },
      //表单规则验证
      regestRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { max: 8, min: 8, message: "请输入8位用户名", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.beforeUrl = from.path;
    });
  },
  methods: {
    login() {
      // 表单预验证;>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        this.$http
          .post(
            "login?loginName=" +
              this.loginForm.username +
              "&password=" +
              hex_md5(this.loginForm.password + "lzy")
          )
          .then((res) => {
            window.sessionStorage.setItem("username", this.loginForm.username);
            window.sessionStorage.setItem("uid", res.data.uid);
            this.$message.success("登录成功!");
            this.$store.commit("login");
            if (this.beforeUrl.search("/exam/") !== -1) {
              this.$router.push(this.beforeUrl);
            } else this.$router.push("mainpage");
          })
          .catch((err) => {
            if (err.response.status === 401) {
              this.$http.post("/logout").catch((err) => {
                this.$message.error("服务器错误,请稍后再试!");
              });
              this.login();
            } else if (err.response.status === 403) {
              this.$message.error("用户名或邮箱不存在，或密码错误!");
            } else {
              this.$message.error("网络错误,请稍后再试!");
            }
          });
      });
    },
    regest() {
      var uname = this.regestForm.username;
      var email = this.regestForm.email;
      var password = hex_md5(this.regestForm.password + "lzy");
      this.$refs.regestForm.validate(async (valid) => {
        if (!valid) return;
        this.$http
          .post("/register", {
            username: uname,
            email: email,
            password: password,
          })
          .then((res) => {
            if (res.status == 200) {
              this.$message.success("注册成功!");
              (this.regestForm.name = {
                username: "",
                password: "",
                email: "",
                password2: "",
              }),
                (this.isRolling = !this.isRolling);
            }
          })
          .catch((err) => {
            if (err.response.status === 403) {
              this.$message.error("用户名或邮箱已被注册!");
            } else if (err.response.status == 500) {
              this.$message.error("服务器错误,请稍后再试!");
            } else {
              this.$message.error("未知错误,请稍后再试!");
            }
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
// .bg {
//   background-image: url(https://th.bing.com/th/id/Rd6b536429ab44afea81917a8b972f985?rik=o7vAgRE0JiouTw&riu=http%3a%2f%2fwww.tianlaiedu.com%2fUpFile%2fimage%2f20180117%2f20180117151032_8959.jpg&ehk=wOF%2b7u%2bACDKInZslJo4ciopiJ%2b6e8j7Wzq%2fNbvTLxuM%3d&risl=&pid=ImgRaw);
//   background-repeat: no-repeat;
//   background-size: cover;
//   position: fixed;
//   top: 0;
//   left: 0;
//   z-index: -10;
//   width: 100%;
//   height: 100%;
// }
.login_container {
  height: 100%;
  // 以下代码为添加背景视频新增的
  position: relative;
  overflow: hidden;
  padding: 0px;
  // min-height: 100vh;
}
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
// .header h3 {
//   display: inline-block;
//   margin: 20px 20px;
//   height: 60px;
//   font-weight: 400;
//   font-size: 50px;
//   color: #fff;
//   font-family: "SimSun";
// }
.login_box {
  width: 460px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.login_box .login_top {
  display: inline-block;
  width: 100%;
  height: 70px;
  background-color: rgba(240, 240, 240, 0.25);
  font-size: 38px;
  text-align: center;
  line-height: 80px;
  border-radius: 5px 5px 0 0;
}
/deep/ .el-button {
  font-size: 17px;
  width: 170px;
}
.login_form {
  padding: 30px 40px;
}
/deep/.el-input__inner {
  font-size: 19px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}

.video_bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: -10;
}

#try {
  .rollbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    // margin: 100px auto;

    &_front,
    &_behind {
      transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
      backface-visibility: hidden; //元素背面向屏幕时是否可见
      transition-duration: 0.5s;
      transition-timing-function: "ease-in";
      // background: #008080;
      .contentbox {
        width: 200px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 100px;
        }
      }
    }
    &_behind {
      transform: rotateY(180deg);
      visibility: hidden; //元素不可见，但占据空间
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }
  .box_rolling {
    .rollbox_front {
      transform: rotateY(180deg);
      visibility: hidden;
    }
    .rollbox_behind {
      transform: rotateY(360deg);
      visibility: visible;
    }
  }
}
.regest_box {
  width: 460px;
  height: 530px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.regest_box .regest_top {
  display: inline-block;
  width: 100%;
  height: 60px;
  background-color: rgba(240, 240, 240, 0.25);
  font-size: 32px;
  text-align: center;
  line-height: 60px;
  border-radius: 5px 5px 0 0;
}
.regest_form {
  box-sizing: border-box;
  padding: 15px 30px;
}
/deep/ .el-form-item {
    margin-bottom: 12px;
}
.background {
  // background-image: url("../../img/1.jpg");
  /* 相对于视口固定 */
  // background-attachment: fixed;
  // background-size: cover;
  // background-position: 50% 50%;
  // position: relative;
  // text-align: center;
  // overflow: hidden;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}
</style>